// 轮播图
function initSwiper() {
    var mySwiper = new Swiper('.swiper', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },

        // observer: true,
        // observeParents: true,
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })
}
initSwiper()

/*
   显示用户信息
*/
function showUser() {
    let user = localStorage.getItem('USER')
    user = JSON.parse(user)
    //  console.log(user);
    //  console.log(user.username);
    let headerStr = `
                      <img src="${user.headerimg}" alt="">
                      <p>用户名: ${user.username}</p>
                      <p>年龄：${user.age}</p><br>
                      <button>退出</button>`

    const title = document.querySelector('header>.title')
    title.innerHTML = headerStr
}
showUser()
/**
 * 退出
 *   1. 清除localStorage登录用户信息
 */
function logout() {
    const logoutBtn = document.querySelector('.title>button')
    logoutBtn.addEventListener('click', function () {
        // 1. 清除localStorage登录用户信息
        localStorage.removeItem('USER')
        // 2. 跳转到登录界面
        location.href = './login.html'
    })
}
logout()

//页号
let pageNo = 1
//所有商品列表标签数据
let allStr = ''

/*
    商品列表数据
*/
function loadProduct(pageNo) {
    axios({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/list',
        params: {
            pageSize: 8,
            pageNo,
        },
    }).then(response => {
        let data = response.data
        let { resultCode, resultInfo } = data
        if (resultCode == 1) {
            let list = resultInfo.list
            showProductList(list)
        }
    })
}



/*
    动态渲染商品列表
*/
function showProductList(list) {
    let str = list
        .map(item => {
            return `<div class="product" onclick="onDetail(${item.id})">
                          <a href="javascript:void(0)">
                              <img src="${item.picture}" alt="">
                          </a>
                          <div>
                              <p class="product-name">
                                 <a href="javascript:void(0)">${item.shop}</a>
                              </p>
                              <p>￥${item.price} ${item.putaway}人已买</p>
                              <button>立即抢购  >></button>
                          </div>
                    </div>`
        }).join('')
    allStr += str
    const productListWrapper = document.querySelector('.product-list-wrapper')
    productListWrapper.innerHTML = allStr
}

/*
    加载更多
*/
function onMore() {
    const moreBtn = document.querySelector('.more')
    moreBtn.addEventListener('click', function () {
        loadProduct(++pageNo)
    })
    window.addEventListener("scroll", function () {
        // 到顶部的距离
        const scrollTop = document.documentElement.scrollTop;
        // console.log('>' + scrollTop);
        // 页面总长度
        const scrollHeightEle = document.documentElement.scrollHeight;
        // console.log('>>' + scrollHeightEle);
        // 滚动条长度
        const clientHeightEle = document.documentElement.clientHeight;
        // console.log('>>>' + clientHeightEle);
        if (scrollHeightEle - (clientHeightEle + scrollTop) < 20) {
            // alert("Touch_Buttom!");
            loadProduct(++pageNo)
        }
    })
}

/*
   回到顶部
*/
function backToTop() {
    const toTop = document.querySelector('.backTop>img');
    toTop.addEventListener('click', () => {
        let Timer = setInterval(function () {
            //    var scrollTopEle = document.documentElement.scrollTop
            // console.log(scrollTopEle);
            document.documentElement.scrollTop -= 50
            if (document.documentElement.scrollTop < 50) {
                document.documentElement.scrollTop = 0
                clearInterval(Timer)
            }
            if (document.documentElement.scrollTop == 0) {
                clearInterval(Timer)
            }
        }, 20)
    })
}
backToTop()

/*
  商品详情
*/
function onDetail(id) {
    location.href = '../pages/detail.html?id=' + id
}
const searchBtn = document.querySelector('.search-container>button')



// 根据关键字查询商品接口详情
function searchProduct() {
    // console.log(search);

    searchBtn.addEventListener('click', function () {
        let inputEle = document.querySelector('.search-container>input')
        console.log(inputEle);
        let keyword = inputEle.value
        console.log(keyword);
        axios({
            method: 'get',
            url: 'http://api.yuguoxy.com/api/shop/search',
            params: {
                keyword,
            },
        }).then(response => {
            let data = response.data
            console.log(data);
            let { resultCode, resultInfo } = data
            if (resultCode == 1) {
                let productList = resultInfo.list
                let id = productList[0].id
                onDetail(id)
            } else {
                alert('失败')
            }
        })
    })

}


searchProduct()
loadProduct(pageNo)
onMore()
